<template>
	<view>
		<view class="date">
			<view class="date_single">今天 {{dayjs().format("MM-DD")}}</view>
			<view class="date_single">明天 {{dayjs().add(1,"day").format("MM-DD")}}</view>
			<view class="date_single">后天 {{dayjs().add(2,"day").format("MM-DD")}}</view>
			<view class="date_single">{{dayjs().add(3,"day").format("dddd")}}
				{{dayjs().add(3,"day").format("MM-DD")}}
			</view>
		</view>
		<view class="search">
			<uni-data-select :clear="false" v-model="area" :localdata="areaRange" placeholder="地点"></uni-data-select>
			<uni-data-select :clear="false" v-model="sort" :localdata="sortRange" placeholder="推荐排序"></uni-data-select>
		</view>
		<view class="content">
			<view class="content_card" @click="chooseAseat">
				<view class="basicInfo">
					<view class="movieName">百丽宫影城（恒隆广场店）</view>
					<view class="fare">￥46起</view>
				</view>
				<view class="playLocation">
					<view class="address">历下区泉城路188号恒隆广场东翼6层</view>
					<view class="distance">330m</view>
				</view>
				<view class="discount">
					<uni-tag text="可退票" type="primary" size="mini" />
					<uni-tag text="可改签" type="success" size="mini" />
					<uni-tag text="券包3折起" type="error" size="mini" />
				</view>
				<view class="recentEvents">近期场次：15:35 16:10 16:50 17:25</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		onLoad
	} from "@dcloudio/uni-app";
	import {
		onMounted,
		ref,
		reactive
	} from "vue";
	import dayjs from 'dayjs';
	import 'dayjs/locale/zh-cn'; // 引入中文语言包
	dayjs.locale('zh-cn'); // 设置语言为中文

	onLoad(() => {
		uni.setNavigationBarTitle({
			title: "新的标题"
		})
	})
	onMounted(() => {
		// console.log();
	})
	const area = ref("");
	let areaRange = reactive([{
			value: 0,
			text: "济南"
		},
		{
			value: 1,
			text: "青岛"
		},
		{
			value: 2,
			text: "日照"
		}
	]);
	const sort = ref("");
	let sortRange = reactive([{
			value: 0,
			text: "价格"
		},
		{
			value: 1,
			text: "距离"
		}
	]);

	function chooseAseat(e) {
		uni.navigateTo({
			url: "/pages/movie/chooseAseat"
		})
	}
</script>

<style lang="scss">
	.date {
		height: 40px;
		width: 100%;
		// background-color: orange;
		overflow-x: auto;
		display: flex;
		white-space: nowrap;

		.date_single {
			background-color: red;
			width: 30%;
			flex: 0 0 auto;
			margin-right: 10px;
			background-color: lightblue;
			display: flex;
			align-items: center;
			justify-content: center;
			// font-size: 10px;
		}
	}

	.search {
		display: flex;
		flex-direction: row;
	}

	.content_card {
		width: calc(100% - 10px);
		background-color: #e7e7e7;
		padding: 5px;
		border-radius: 5px;
		border-bottom: 1px solid #ccc;

		.basicInfo,
		.playLocation,
		.recentEvents {
			display: flex;
			justify-content: space-between;
			align-items: center;
			height: 30px;
			// background-color: red;
		}

		.basicInfo {
			.movieName {
				font-size: 18px;
			}

			.fare {
				color: red;
			}
		}

		.playLocation,
		.recentEvents {
			font-size: 14px;
			color: #4f4f4f;
		}

		.discount {
			.uni-tag {
				margin-right: 5px;
			}
		}
	}
</style>